import React, {Component} from 'react';
import { Menu, Icon } from 'antd';
import {Link} from 'react-router';
import menuConfig from './menusConfig';
const SubMenu = Menu.SubMenu;

export class Menus extends Component {
  handleClick = e => {
    // e.item.props.route
  };
  constructor(props) {
      super(props);
  }
  renderMenus() {
    return menuConfig.map((item) => {
        return (
            item.children ?
            <SubMenu
                key={item.key}
                title={
                    <span>
                        <Icon type={item.icon} />
                        <span>{item.title}</span>
                    </span>
                }
                >
                    {item.children.map((subItem) => {
                        return (
                            <Menu.Item route={subItem.route} key={subItem.key}>
                                <Link to={subItem.route}>{subItem.title}</Link>
                            </Menu.Item>
                        );
                    })}
            </SubMenu>
            :
            <Menu.Item route={item.route} key={item.key}>{item.title}</Menu.Item>
        )
    });
  }
  render() {
    return (
        <Menu
            onClick={this.handleClick}
            style={{ width: this.props.width, }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            >
            {this.renderMenus()}
        </Menu>
    );
  }
}
